<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="frame/bootstrap-4.5.0-dist/css/bootstrap.min.css">
    <style type="text/css">
        html,body{
            height: 100%;
            width: 100%;
        }
        #container{
            height: 100%;
            width: 100%;
            padding: 20px 10px 0px 10px;

        }
    </style>
    <script src="frame/jquery-3.5.1/jquery-3.5.1.min.js"></script>
</head>
<body>
<div id = "container">
    <div id = "search_div">
        <form action="" id="search_form">
            <div class="form-group row">
                <label class="col-form-label col-1">部门号:</label>
                <div class="col-3">
                    <input type="text" id="eName" class="form-control" name="deptno">
                </div>
            </div>
            <div class="form-group row">
                <label class="col-form-label col-1">部门名:</label>
                <div class="col-3">
                    <input type="text" id="losal" class="form-control" name="dname">
                </div>
            </div>
            <div class="form-group row">
                <label class="col-form-label col-1">部门位置:</label>
                <div class="col-3">
                    <input type="text" id="hisal" class="form-control" name="loc">
                </div>
            </div>
            <div class="form-group row">
                <label class="col-form-label col-2"></label>
                <div class="col-3">
                    <button type="button" class="btn btn-info btn-lg" id="btn-search">搜索</button>
                </div>
            </div>
        </form>
    </div>
    <div id = "show_div">
        <table class="table table-hover table-striped table-bordered">
            <thead>
            <tr>
                <td>
                    <input type="checkbox" id="selectAll">
                </td>
                <td>部门编号</td>
                <td>部门名</td>
                <td>部门位置</td>
                <td>部门人数</td>
                <td>操作</td>
            </tr>
            </thead>
            <tbody id="table_data">
<!--            <tr>-->
<!--                <td>-->
<!--                    <input type="checkbox" name="ids" value="1">-->
<!--                </td>-->
<!--                <td>10</td>-->
<!--                <td>研发部</td>-->
<!--                <td>郊区</td>-->
<!--                <td>-->
<!--                    <a href="#">删除</a>-->
<!--                    <a href="#">编辑</a>-->
<!--                </td>-->
<!--            </tr>-->
<!--            <tr>-->
<!--                <td>-->
<!--                    <input type="checkbox" name="ids" value="1">-->
<!--                </td>-->
<!--                <td>10</td>-->
<!--                <td>研发部</td>-->
<!--                <td>郊区</td>-->
<!--                <td>-->
<!--                    <a href="#">删除</a>-->
<!--                    <a href="#">编辑</a>-->
<!--                </td>-->
<!--            </tr>-->
            </tbody>
        </table>
    </div>
</div>
<script>
    jQuery(function () {

        jQuery.post("deptController/search",function (rst) {
            let rows = "";
            for(let i = 0;i<rst.length;i++){
                let deptImpl = rst[i];
                rows += `
            <tr>
                <td>
                    <input type="checkbox" name="ids" value="${deptImpl.deptno}">
                </td>
                <td>${deptImpl.deptno}</td>
                <td>${deptImpl.dname}</td>
                <td>${deptImpl.loc}</td>
                <td>${deptImpl.c}</td>
                <td>
                    <a href="#">删除</a>
                    <a href="#">编辑</a>
                </td>
            </tr>
                    `;
            }
            jQuery("#table_data").html(rows);
        },"json");
        jQuery("#btn-search").click(function () {
            let formData = jQuery("#search_form").serialize()
            console.log(formData);

        });
    });
</script>
</body>
</html>